<template>
	<view class="main-page">
		<view class="top-box">
			<view class="search-box">
				<u-search searchIconColor="#007AFE" shape="square" placeholder="搜索" :clearabled="true" :showAction="false"
					:bgColor="'#fff'"></u-search>
			</view>
			<view class="not-read">
				<image src="@/static/icon/1111.png" mode="widthFix"></image>
				<view class="num-msg">
					有<span class="nums">{{unreadNumber}}</span>条消息未回复
				</view>
			</view>
		</view>
	<scroll-view :scroll-top="0" scroll-y="true" @scrolltolower="lower" class="msg-list" v-if="msgList.length>0">
				<view class="msg-item" v-for="item in msgList" :key="item.userId" @click="toConnect(item)">
					<u-avatar :src="item.headImgUrl?item.headImgUrl:'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'" shape="square" :size="50"></u-avatar>
					<u-badge v-if="item.userUnreadNumber" type="error" max="99" :value="item.userUnreadNumber" class="nums-tip"></u-badge>
					<view class="msg-right">
						<view class="connect-name">
							<span class="connect-nickName">{{item.nickName}}</span>
							<span class="connect-time">{{item.sendTime}}</span>
						</view>
						<view class="msg-text">
							{{item.messageContent}}
						</view>
					</view>
				</view>
		</scroll-view>
		<u-empty
		        style="padding-top:30vh;"
				mode=""
		        v-if="msgList.length==0"
		        icon="../../static/icon/nothing.png"
		>
		</u-empty>
		<tabbar :routePath="'/pages/message/message'" :typeBar="2" />
	</view>
</template>
<script>
	import {messageByDoctor} from "@/common/api/index.js"
	import { mapState } from 'vuex'
	export default{
	data() {
		return {
			  useInfo:{},
			  msgList:[],
			  unreadNumber:0,
			  socketTast:null,
		};
	},
	methods:{
		lower(){
			uni.$u.throttle(()=>{
				console.log('触底加载')
			}, 500)
			
		},
		toConnect(item){
			uni.navigateTo({
				url:`/pages/connectMsg/connectMsg?item=${encodeURIComponent(JSON.stringify(item))}`,
			})
		},
		//消息列表
		async getMsglist(){
			let res = await messageByDoctor()
			console.log(res)
			this.unreadNumber=0
			this.msgList = res.data.messageData
			res.data.messageData.forEach(v=>{
				this.unreadNumber+=v.userUnreadNumber
			})
		},
		//接收消息
	},
	onShow() {
		let  users=  uni.getStorageSync('doctorInfo')||null
		if(users){
			this.getMsglist()
		}
	},
	onLoad() {
		
		let  users=  uni.getStorageSync('doctorInfo')||null
		if(!users){
			uni.navigateTo({
				url:"/pages/login/login"
			})
		}else{
			this.useInfo = JSON.parse(users)
			if(this.useInfo.id){
				this.$store.dispatch('websocketInit',this.useInfo.id)
				this.socketTast = this.$store.state.socketTast 
			}	
		}
		this.socketTast.onMessage((res)=>{
			
			this.unreadNumber++
			let reciveUser =  this.msgList.map(v=>v.userId)
			let indexs = reciveUser.indexOf(JSON.parse(res.data).userId)
			console.log(reciveUser)
			console.log(indexs)
			if(indexs>=0){
				    let newUser =JSON.parse(JSON.stringify(this.msgList[indexs]))
					newUser.messageContent=JSON.parse(res.data).textMessage
					newUser.sendTime=JSON.parse(res.data).sendTime,
					newUser.userUnreadNumber++
					this.msgList.splice(indexs,1)
				    this.msgList.unshift(newUser)
			}else{
				this.msgList.unshift({
				   		headImg: JSON.parse(res.data).headImgUrl,
						nickName:JSON.parse(res.data).username,
				   		messageContent: JSON.parse(res.data).textMessage,
						userId:JSON.parse(res.data).userId,
				   		sendTime: JSON.parse(res.data).sendTime,
						userUnreadNumber:1,
				   		whetherRead: 0,
				   		type:JSON.parse(uni.getStorageSync('doctorInfo')).type=="US"?"DC":"US"
				})
			}
		})
	}
	}
</script>

<style lang="scss">
.main-page{
	width: 100%;
	overflow: hidden;
	.top-box{
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.search-box{
		width: 100%;
		padding:0 30rpx;
	}
	.not-read{
		width: 100%;
		display: flex;
		align-items: center;
		padding:0 30rpx;
		gap: 10rpx;
		// margin-top: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		image{
			width: 48rpx;
			height: 48rpx;
		}
		.nums{
			color: #3F86FF;
		}
	}
	.msg-list{
		height:calc(100vh - 368rpx);
		padding-bottom: 200rpx;
		background-color: #fff;
		padding: 0 30rpx;
	  .msg-item{
		  display: flex;
		  position: relative;
		  padding: 20rpx 0;
		  border-bottom: 1rpx solid #EDEDED;
		  gap: 20rpx;
		  .nums-tip{
			  position: absolute;
			  left: 80rpx;
			  top: 10rpx;
			  min-width: 34rpx;
			  height: 34rpx;
		  }
		  .msg-right{
			  width: calc(100% - 60px);
			  padding: 10rpx 0;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  .connect-name{
				  width: 100%;
				  font-size: 32rpx;
				  font-weight: 400;
				  color: #03081A;
				  display: flex;
				  justify-content: space-between;
				  .connect-time{
					  font-size: 24rpx;
					  font-weight: 400;
					  color: #878B99;
				  }
				  .connect-nickName{
					  flex: 1;
					  overflow: hidden;
					  text-overflow: ellipsis;
					  white-space: nowrap;
				  }
			  }
			  .msg-text{
				  width: 100%;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
				  font-size: 28rpx;
				  font-weight: 400;
				  color: #878C99;
			  }
		  }
	  }
	}
}
</style>